<template>
  <div v-if="purchase" id="purchase-detail">
    <div class="member-nav">
      <ul class="member-nav-list">
        <li>
          <a href="javascript:;">采购单详情</a>
        </li>
      </ul>
    </div>
    <h2 class="title-purchase">{{ purchase.title }}</h2>
    <div class="detail-view">
      <p class="title-detail">采购信息</p>
      <div class="value-detail">
        <dl>
          <dt>发布时间：</dt>
          <dd>{{ purchase.create_time | unixToDate }}</dd>
        </dl>
        <dl>
          <dt>截止时间：</dt>
          <dd>{{ purchase.closing_date | unixToDate }}</dd>
        </dl>
        <dl>
          <dt>采购单状态：</dt>
          <dd>{{ purchase.status === 0 ? '开启' : '关闭' }}</dd>
        </dl>
      </div>

      <p class="title-detail">采购要求</p>
      <div class="value-detail">
        <dl>
          <dt>（采购）收货地：</dt>
          <dd>{{ `${purchase.ship_province}-${purchase.ship_city}-${purchase.ship_county}` }}</dd>
        </dl>
        <dl>
          <dt>（供应）发货地：</dt>
          <dd>{{ `${purchase.seller_province}-${purchase.seller_city}-${purchase.seller_county}` }}</dd>
        </dl>
        <dl>
          <dt>发票要求：</dt>
          <dd>{{ purchase.need_receipt === 0 ? '无需发票' : '需要发票' }}</dd>
        </dl>
      </div>

      <p class="title-detail">采购商品</p>
      <el-table :data="[purchase]">
        <el-table-column label="商品名称" prop="goods_names"></el-table-column>
        <el-table-column label="商品规格" prop="goods_sku" align="center"></el-table-column>
        <el-table-column label="采购量" align="center">
          <span slot-scope="{row}">
            {{ row.goods_num + row.goods_unit }}
          </span>
        </el-table-column>
        <el-table-column label="采购价" align="center">
          <span slot-scope="{row}">
            {{ row.goods_price | unitPrice('￥') }}【{{ getPriceTypeText(row.price_type) }}】
          </span>
        </el-table-column>
        <el-table-column>
          <div v-if="purchase.goods_img === ''">
            <span> </span>
          </div>
          <div v-else>
            <a :href="purchase.goods_img" target="_blank">
              <img :src="purchase.goods_img" class="goods-img"/>
            </a>
          </div>
        </el-table-column>
      </el-table>
      <p class="remark-p">补充说明：{{ purchase.purchase_explain || '无' }}</p>
    </div>

    <template v-if="quotationData">
      <h2 class="title-purchase">供货商报价列表</h2>
      <div class="table-view">
        <table class="table" cellspacing=0 cellpadding=0>
          <thead>
          <tr>
            <th>报价方</th>
            <th>价格说明</th>
            <th>报价说明</th>
            <th>报价附件</th>
            <th>操作</th>
          </tr>
          </thead>
        </table>
        <div v-for="item in quotationData.data" :key="item.quotation_id" class="value-table">
          <div class="tr-header">
            <span>标题：{{ item.quotation_title }}</span>
            <span>报价时间：{{ item.create_time | unixToDate }}</span>
            <div v-if="item.reply_date == 0">
              <span>期待您的回复</span>
            </div>
            <div v-else>
              <span>期望：{{ item.reply_date | unixToDate('yyyy-MM-dd') }}日前得到答复</span>
            </div>
          </div>
          <table class="table" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>
                <p>{{ item.company }}</p>
                <p>联系人：{{ item.contact_name }}</p>
                <p>联系电话：{{ item.contact_number }}</p>
              </td>
              <td>
                <div v-if="item.goods_price === null">
                  <p>单位：{{ item.goods_unit || '' }}</p>
                </div>
                <div v-else-if="item.goods_unit == 0">
                  <p>单价：{{ item.goods_price | unitPrice('￥') }}</p>
                </div>
                <div v-else>
                  <p>{{ item.goods_price | unitPrice('￥') }}/{{ item.goods_unit || '' }}</p>
                </div>
              </td>
              <td>
                <p>{{ item.quotation_detail }}</p>
              </td>
              <td>
                <a :href="item.quotation_file" target="_blank">附件下载</a>
              </td>
              <td>
                <el-button
                  v-if="item.status === 0"
                  type="danger"
                  size="small"
                  @click="handleCloseQuotation(item)"
                >关闭</el-button>
                <span v-if="item.status === 1">已关闭</span>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import Vue from 'vue'
import * as API_Purchase from '@/api/purchase'
import { Table, TableColumn } from 'element-ui'

Vue.use(Table).use(TableColumn)

export default {
  name: 'purchase-detail',
  data() {
    return {
      purchase_id: '',
      purchase: '',
      quotationData: '',
      quotationParams: {
        page_no: 1,
        page_size: 5
      }
    }
  },
  mounted() {
    this.purchase_id = this.$route.query.purchase_id
    this.GET_PurchaseDetail()
    this.GET_QuotationList()
  },
  methods: {
    /**
     * 获取采购单详情
     * @returns {Promise<void>}
     * @constructor
     */
    async GET_PurchaseDetail() {
      const res = await API_Purchase.getPurchaseDetail(this.purchase_id)
      this.purchase = res
    },
    /**
     * 获取价格类型文字
     * @param type
     * @returns {string}
     */
    getPriceTypeText(type) {
      switch (type) {
        case 0:
          return '可议价'
        case 1:
          return '不可议价'
        case 2:
          return '面议'
      }
    },
    /**
     * 获取报价单列表
     * @returns {Promise<void>}
     * @constructor
     */
    async GET_QuotationList() {
      const res = await API_Purchase.getQuotationsByPurchaseId({
        ...this.quotationParams,
        purchase_id: this.purchase_id
      })
      this.quotationData = res
    },
    /**
     * 关闭报价单
     * @param item
     */
    handleCloseQuotation(item) {
      this.$confirm('确定要关闭这个报价单吗？', async() => {
        await API_Purchase.closeQuotation(item.quotation_id)
        this.$message.success('关闭成功！')
        this.quotationParams.page_no = 1
        this.GET_QuotationList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../assets/styles/color';
.member-nav {
  a {
    background-color: #fff;
    color: $color-main;
    border-bottom: 1px solid #fff;
  }
}
.goods-img {
  width: 50px;
  height: 50px;
}
.title-purchase {
  margin-top: 20px;
  margin-left: 10px;
}
.detail-view {
  margin-top: 20px;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  padding: 10px;
  color: #282828;
  .title-detail {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 10px;
    height: 30px;
    font-size: 14px;
    color: #282828;
    margin-top: 10px;
    &::before {
      content: ' ';
      position: absolute;
      left: 0;
      width: 4px;
      height: 20px;
      background-color: $color-main;
      border-radius: 2px;
    }
  }
  .value-detail {
    dl {
      display: flex;
      line-height: 28px;
      font-size: 14px;
    }
    dt {
      width: 120px;
      text-align: right;
    }
  }
  .remark-p {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 14px;
    line-height: 23px;
    color: #606266;
    padding-bottom: 10px;
  }
  /deep/ {
    .el-table thead th {
      background-color: #f2f2f2;
    }
  }
}
.table-view {
  margin-top: 20px;
  color: #282828;
  .table {
    border-bottom: 1px solid #f2f2f2;
    box-sizing: border-box;
    width: 100%;
    thead tr {
      background-color: #F2F2F2;
      border: none;
      th {
        line-height: 40px;
      }
      th:nth-child(1) {
        width: 36.333%
      }
      th:nth-child(2) {
        width: 12%
      }
      th:nth-child(3) {
        width: 19%
      }
      th:nth-child(4) {
        width: 10.333%
      }
      th:nth-child(5) {
        width: 10.333%
      }
    }
    tbody {
      td {
        padding: 8px 5px;
        border-right: 1px solid #f2f2f2;
        box-sizing: border-box;
        text-align: center;
        &:last-child {
          border-right: none;
        }
      }
      td:nth-child(1) {
        text-align: left;
      }
    }
  }
  .value-table {
    padding-top: 10px;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    .tr-header {
      display: flex;
      align-items: center;
      width: 100%;
      height: 30px;
      border: 1px solid #f2f2f2;
      box-sizing: border-box;
      border-left: none;
      border-right: none;
      background-color: #f2f2f2;
      span {
        margin-left: 20px;
      }
    }
  }
}
</style>
